import React from 'react';
import { Button, Image } from 'antd-mobile';
import { DeleteOutline } from 'antd-mobile-icons';
import './index.css';

interface FileItem {
  file: File;
  preview?: string;
  id: string;
}

interface FilePreviewProps {
  files: FileItem[];
  onRemove: (id: string) => void;
  onSend: () => void;
  onCancel: () => void;
}

const FilePreview: React.FC<FilePreviewProps> = ({ files, onRemove, onSend, onCancel }) => {
  const isImage = (file: File) => file.type.startsWith('image/');
  const isPdf = (file: File) => file.type === 'application/pdf';

  return (
    <div className="file-preview">
      <div className="preview-header">
        <span className="file-count">已选择 {files.length} 个文件</span>
        <div className="preview-actions">
          <Button size="small" onClick={onCancel}>
            取消
          </Button>
          <Button size="small" color="primary" onClick={onSend}>
            发送
          </Button>
        </div>
      </div>

      <div className="file-list">
        {files.map((fileItem) => (
          <div key={fileItem.id} className="file-item">
            <div className="file-info">
              {isImage(fileItem.file) && fileItem.preview && (
                <Image
                  src={fileItem.preview}
                  alt="preview"
                  className="file-thumbnail"
                />
              )}
              {isPdf(fileItem.file) && (
                <div className="file-icon pdf-icon">📄</div>
              )}
              {!isImage(fileItem.file) && !isPdf(fileItem.file) && (
                <div className="file-icon">📎</div>
              )}
              <div className="file-details">
                <div className="file-name">{fileItem.file.name}</div>
                <div className="file-size">
                  {(fileItem.file.size / 1024 / 1024).toFixed(2)} MB
                </div>
              </div>
            </div>
            <Button
              size="mini"
              onClick={() => onRemove(fileItem.id)}
              className="remove-button"
            >
              <DeleteOutline />
            </Button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FilePreview;

